<template>
    <div class="header">
        <h1>公共头部组件 - {{ msg }}-{{ count }}</h1>
        <ul>
            <li v-for="item in listData">{{ item }}</li>
        </ul>
        <button @click="clickBtn">给父组件传递数据</button>
    </div>
</template>

<script setup lang="ts">

//子组件HeaderCom接受父组件ComView传递的数据
//通过defineProps方法进行接收传递过来的自定义属性名称，并约束数据类型
defineProps<{
    msg ? :string,
    count ?:number,
    listData ?:Array<string>
}>()

//子组件给父组件传参，通过defineEmits方法映射一个事件进行传参
const emit=defineEmits<{
    toComData:[id:number],
    toComData2:[str:string]
}>()

//调用emit方法进行传递
//自动传参
//emit("toComData",2)
import { ref } from 'vue'
const strData = ref<string>("子组件的数据")
//被动传参：通过事件的触发进行传递数据
function clickBtn(){
    emit("toComData2",strData.value)
}

</script>

<style lang="less" scoped>

.header{
    h1{
        color: aqua;
    }
}
</style>